<template>
  <up-navbar bgColor="#fff">
    <template #left>
      <view>Anytime-厨房</view>
    </template>
    <template #right>
      <view class="flex-center">
        <image src="/static/icon/oper/a-122_sousuo.png" style="height: 60rpx;width: 60rpx"/>
      </view>
    </template>
  </up-navbar>
  <view class="main">
    <up-swiper
        :list="list2"
        keyName="image"
        showTitle
        style="margin: 0 20rpx"
        height="300rpx"
        circular
    ></up-swiper>
    <introduce></introduce>
    <cook-category></cook-category>
    <cook-recommend :obj="state.recommend"></cook-recommend>
    <cook-list></cook-list>
  </view>
  <a-float-menu/>
</template>

<script setup>
import Introduce from "@/cook/components/introduce.vue";
import {reactive,ref} from 'vue';
import CookCategory from "@/cook/components/cook-category.vue";
import CookRecommend from "@/cook/components/cook-recommend.vue";
import CookList from "@/cook/components/cook-list.vue";

const list2 = reactive([
  {
    image: 'https://picsum.photos/id/222/200/300',
    title: '昨夜星辰昨夜风，画楼西畔桂堂东',
  },
  {
    image: 'https://picsum.photos/id/223/200/300',
    title: '身无彩凤双飞翼，心有灵犀一点通',
  },
  {
    image: 'https://picsum.photos/id/228/200/300',
    title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
  },
]);
const state = ref({
  recommend:{
    title:"每日推荐",
    path:""
  }
})

</script>


<style scoped lang="scss">
@import "@/static/css/index.css";

page {
  background: #f7f7f7;
}

.main {
  // #ifdef H5 || MP-WEIXIN
  padding-top: 120rpx;
  // #endif
  // #ifdef APP-PLUS
  padding-top: 160rpx;
  // #endif
}


</style>